圖片輪播:極簡風
https://laihao2.com/Home/Contact16
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
這裡沒有用到資料庫~
Controllers裡面的Entities>
public ActionResult Contact16()
{
ViewBag.Message = "Your contact page.";
return View();
}
解釋程式碼
這段代碼是一個 C# 中 ASP.NET MVC 的控制器方法,它處理來自客戶端的請求並返回一個視圖。我們可以逐步解析:
public ActionResult Contact16()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult Contact16()
:
Contact16
,返回類型為 ActionResult
。ActionResult
是一個基類,表示控制器動作的結果,它可以是多種類型的響應(例如返回一個視圖、重定向到另一個 URL 等)。ViewBag.Message = "Your contact page."
:
ViewBag
是 ASP.NET MVC 中的一個動態對象,它用於在控制器和視圖之間傳遞數據。在這個例子中,Message
字段被賦值為 "Your contact page."
。ViewBag.Message
來顯示這條信息。return View();
:
View()
方法告訴 MVC 框架返回與該控制器動作名稱相同的視圖(在這個例子中,很可能是名為 Contact16.cshtml
的視圖文件)。Message
的字符串變量,然後將該變量傳遞給視圖,用於顯示聯系頁面的相關信息。產生畫面View程式碼
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact16";
}
<div class="farm-wrapper">
<h3>作品-極簡風網站</h3>
<h3>建置中</h3>
<div class="farm-content">
<head>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>極簡風網站</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="Content/css/reset.css">
<link rel="stylesheet" href="Content/css/farm-style.css">
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5; /* 淡灰色背景 */
color: #333; /* 深灰色文字 */
}
header {
text-align: center;
padding: 20px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
main {
padding: 20px;
}
/* 輪播區域 */
.slider {
position: relative;
width: 100%;
max-width: 600px;
margin: 20px auto;
overflow: hidden;
border-radius: 10px;
}
.slide {
display: none;
width: 100%;
}
.slide img {
width: 100%;
height: auto;
display: block;
}
.slide.active {
display: block;
}
footer {
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>我的網站</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">聯絡</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>關於我們</h2>
<p>我們致力於提供高品質的內容和服務,幫助您了解更多有關我們的資訊。</p>
<p>我們的網站包含了最新的作品展示、詳細的公司介紹以及方便的聯絡方式。</p>
</section>
<section>
<h2>我們的服務</h2>
<p>我們提供多種服務,包括網站設計、品牌策劃、內容創作等。無論您的需求是什麼,我們都有專業的團隊為您提供支持。</p>
<ul>
<li>網站設計 - 專業的網站設計服務,讓您的品牌更具吸引力。</li>
<li>品牌策劃 - 精準的品牌策劃,幫助您在市場上脫穎而出。</li>
<li>內容創作 - 高品質的內容創作,提升您的網站曝光率。</li>
</ul>
</section>
<section>
<h2>用戶評價</h2>
<blockquote>
<p>“這個網站提供了非常有用的信息,設計簡潔且易於導航。” - 張三</p>
</blockquote>
<blockquote>
<p>“我非常滿意這裡的服務,專業!” - 李四</p>
</blockquote>
</section>
<section>
<h2>最新消息</h2>
<article>
<h3>新版本發佈</h3>
<p>我們剛剛發佈了網站的新版本,包含了更多的功能和改進,歡迎體驗。</p>
</article>
<article>
<h3>即將舉行的活動</h3>
<p>我們將於下月舉行一場重要的活動,詳細消息敬請關註我們的網站。</p>
</article>
</section>
<!-- 輪播區域 -->
<div class="slider">
<div class="slide active"><img src="~/templates/deco_left.png" alt="圖片1"></div>
<div class="slide"><img src="~/templates/deco_right.png" alt="圖片2"></div>
<div class="slide"><img src="~/templates/webphoto.jpg" alt="圖片3"></div>
</div>
</main>
<!-- JavaScript 部分 -->
<script>
const slider = document.querySelector('.slider');
const slides = slider.querySelectorAll('.slide');
let index = 0;
function nextSlide() {
slides[index].classList.remove('active');
index = (index + 1) % slides.length;
slides[index].classList.add('active');
}
// 每 3 秒自動切換
setInterval(nextSlide, 3000);
</script>
</body>
</html>
解釋程式碼
這段代碼是 ASP.NET MVC 視圖模板中的 HTML 和 C# 代碼的組合。主要的部分是用來生成一個網頁,具體包括布局定義、標題設置、頁面結構、樣式和 JavaScript 功能。
布局設置和標題設置:
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact16";
}
Layout
指定了頁面所使用的布局文件,_Layout.cshtml
是一個共享布局模板,通常定義了頁眉、頁腳等通用部分。ViewBag.Title
設置了頁面的標題為 "Contact16",這個值會在布局文件中用來動態顯示頁面的標題。頁面內容:
<div class="farm-wrapper">
<h3>作品-極簡風網站</h3>
<h3>建置中</h3>
</div>
HTML 頁面結構:
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>極簡風網站</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="Content/css/reset.css">
<link rel="stylesheet" href="Content/css/farm-style.css">
DOCTYPE
、meta
信息(編碼和視口設置)、頁面標題 "極簡風網站",以及引用了外部的 CSS 文件來進行樣式設置。內聯樣式表:
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5; /* 淡灰色背景 */
color: #333; /* 深灰色文字 */
}
/* 其他樣式略 */
</style>
頁面結構內容:
<body>
<header>
<h1>我的網站</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">聯絡</a></li>
</ul>
</nav>
</header>
<main>
<!-- 包含多個段落的展示 -->
</main>
<footer>
<p>© 2024 我的網站</p>
</footer>
</body>
輪播圖功能:
<div class="slider">
<div class="slide active"><img src="~/templates/deco_left.png" alt="圖片1"></div>
<div class="slide"><img src="~/templates/deco_right.png" alt="圖片2"></div>
<div class="slide"><img src="~/templates/webphoto.jpg" alt="圖片3"></div>
</div>
div.slide
中)。slide.active
類的 div
元素默認顯示,其他 slide
元素最初是隱藏的。輪播圖的 JavaScript 邏輯:
<script>
const slider = document.querySelector('.slider');
const slides = slider.querySelectorAll('.slide');
let index = 0;
function nextSlide() {
slides[index].classList.remove('active');
index = (index + 1) % slides.length;
slides[index].classList.add('active');
}
setInterval(nextSlide, 3000); // 每 3 秒自動切換
</script>
跳出視窗提示:現代風
https://laihao2.com/Home/Contact17
目前畫面上請客戶填入聯絡MAIL是還沒有實際功能,可能後面有
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
這裡沒有用到資料表~
Controllers裡面的Entities>
解釋程式碼
這段代碼是一個 C# 中 ASP.NET MVC 的控制器方法,它處理來自客戶端的請求並返回一個視圖。我們可以逐步解析:
public ActionResult Contact17()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult Contact17()
:
Contact16
,返回類型為 ActionResult
。ActionResult
是一個基類,表示控制器動作的結果,它可以是多種類型的響應(例如返回一個視圖、重定向到另一個 URL 等)。ViewBag.Message = "Your contact page."
:
ViewBag
是 ASP.NET MVC 中的一個動態對象,它用於在控制器和視圖之間傳遞數據。在這個例子中,Message
字段被賦值為 "Your contact page."
。ViewBag.Message
來顯示這條信息。return View();
:
View()
方法告訴 MVC 框架返回與該控制器動作名稱相同的視圖(在這個例子中,很可能是名為 Contact17.cshtml
的視圖文件)。總結: 這個方法接收用戶請求,設定一個名為 Message
的字符串變量,然後將該變量傳遞給視圖,用於顯示聯系頁面的相關信息。
產生畫面View程式碼
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact17";
}
<div class="farm-wrapper">
<h3>作品-現代風網站</h3>
<h3>建置中</h3>
<div class="farm-content">
<head>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>現代風網站</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="Content/css/reset.css">
<link rel="stylesheet" href="Content/css/farm-style.css">
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #fafafa;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 20px 40px;
}
header h1 {
font-weight: 700;
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
margin: 0 15px;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
nav a:hover {
color: #ff6347; /* 橘紅色效果 */
}
main {
padding: 40px;
max-width: 1200px;
margin: auto;
}
main h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
}
footer {
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px 40px;
}
header nav {
flex: 1;
text-align: right;
}
html {
scroll-behavior: smooth;
}
body.dark-theme {
background-color: #333;
color: #fff;
}
header.dark-theme, footer.dark-theme {
background-color: #444;
}
nav a.dark-theme {
color: #ddd;
}
nav a.dark-theme:hover {
color: #ff6347;
}
</style>
</head>
<body>
<header>
<h1>我的網站</h1>
<button id="theme-toggle">切換主題</button>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯絡</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>歡迎來到我的網站</h2>
<p>這是一個現代風格的網站範例。我們致力於提供優質的內容和服務,希望您能在這裏找到您所需要的。</p>
<p>請瀏覽我們的產品頁面,了解更多關於我們的服務,或者通過聯繫我們的表單與我們取得聯繫。</p>
</section>
<section>
<h2>關於我們</h2>
<p>我們是一家創新型公司,專註於提供高品質的產品和服務。我們的團隊擁有豐富的經驗和專業知識,致力於滿足客戶的需求。</p>
<p>了解更多關於我們的使命和願景,請訪問我們的 <a href="#">關於</a> 頁面。</p>
</section>
<section>
<h2>我們的產品</h2>
<p>我們提供多種高品質的產品,涵蓋多個領域。每一種產品都經過嚴格的測試和篩選,以確保最佳性能和可靠性。</p>
<ul>
<li><strong>產品1:</strong>簡短的描述。</li>
</ul>
<p>訪問我們的 <a href="#">產品</a> 頁面,了解更多內容。</p>
</section>
<section>
<h2>客戶評價</h2>
<blockquote>
<p>“這是一家非常值得信賴的公司,產品非常出色!”</p>
<footer>- 張三</footer>
</blockquote>
<blockquote>
<p>“他們的服務非常專業,我非常滿意!”</p>
<footer>- 里斯</footer>
</blockquote>
</section>
<section>
<h2>常見問題解答</h2>
<h3>我們如何聯繫支持團隊?</h3>
<p>您可以通過 <a href="#">聯繫我們</a> 頁面獲取支持。</p>
</section>
<section>
<h2>最新動態</h2>
<article>
<h3>標題1</h3>
<p>簡短的新聞內容。</p>
<a href="#">閱讀更多</a>
</article>
</section>
<section>
<h2>聯繫我們</h2>
<p>如果您有任何問題或建議,請隨時通過以下方式與我們聯繫:</p>
<address>
<p>地址: 1234 例子街, 城市, 國家</p>
<p>電話: (123) 456-7890</p>
<p>電子郵件: <a href="#">jzs2home@hotmail.com</a></p>
</address>
</section>
</main>
<form id="contact-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">送出</button>
</form>
<!-- JavaScript 部分 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
alert('歡迎來到我的網站!');
});
document.addEventListener('DOMContentLoaded', () => {
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});
});
document.getElementById('contact-form').addEventListener('submit', (event) => {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
if (name === '' || email === '') {
alert('所有欄位都是必填的!');
event.preventDefault(); // 防止表單提交
}
});
</script>
</body>
</html>
解釋程式碼
這段代碼是 ASP.NET MVC 視圖文件中的 HTML 和 C# 代碼的組合,生成了一個“現代風格”的網頁,提供了多種功能和頁面內容。下面逐步解析代碼的各個部分:
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact17";
}
_Layout.cshtml
,這個文件通常包含網站的通用結構,比如頁眉、頁腳等。<title>
標簽,通常會出現在瀏覽器標簽欄。<div class="farm-wrapper">
<h3>作品-現代風網站</h3>
<h3>建置中</h3>
</div>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>現代風網站</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="Content/css/reset.css">
<link rel="stylesheet" href="Content/css/farm-style.css">
charset
、viewport
(自適應布局)、頁面標題“現代風網站”。<link>
標簽引用了多個外部 CSS 文件,負責頁面的樣式設計。<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #fafafa;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 20px 40px;
}
/* 其他樣式省略 */
</style>
body
的字體、背景顏色、行高、頁眉的布局、導航欄的樣式等。body.dark-theme
和 header.dark-theme
類,支持深色模式,當用戶切換到深色主題時,頁面的背景顏色和文字顏色會發生變化。<body>
<header>
<h1>我的網站</h1>
<button id="theme-toggle">切換主題</button>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯絡</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>歡迎來到我的網站</h2>
<p>這是一個現代風格的網站範例。</p>
</section>
<!-- 其他段落內容省略 -->
</main>
section
,每個部分展示了不同的內容,例如歡迎信息、關於我們、產品介紹、客戶評價、常見問題等。<form id="contact-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">送出</button>
</form>
document.addEventListener('DOMContentLoaded', () => {
alert('歡迎來到我的網站!');
});
document.addEventListener('DOMContentLoaded', () => {
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});
});
document.getElementById('contact-form').addEventListener('submit', (event) => {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
if (name === '' || email === '') {
alert('所有欄位都是必填的!');
event.preventDefault(); // 防止表單提交
}
});
name
和 email
字段是否為空,若為空則彈出提示並阻止表單提交。這段代碼生成了一個現代風格的網站模板,包含響應式設計、主題切換、表單驗證等功能。HTML、CSS 和 JavaScript 的結合使得頁面具有良好的視覺效果和用戶交互性,同時通過 ASP.NET MVC 模板引擎動態生成頁面內容。
大家明天見~